<template>
  <view class="wapper">
    <view class="header">
      <image src="../../assets/images/index/banner@2x.png" class="headerImg" />
      <view class="bannerInner">
        <image src="../../assets/images/index/banner_text@2x.png" class="bannerText" />
        <navigator to class="choiceAddress">
          {{ userInfo.organizationDetailVO.orgName }}
        </navigator>
        <view class="bannerSubtitle">打造园区生态互联</view>
      </view>
    </view>
    <view class="indexContent">
      <view class="contentWrap">
        <image src="../../assets/images/index/banner-image@2x.png" class="bannerImg" />
        <view class="commonItemWrap clear">
          <view
              v-for="(item,index) in itemList"
              :key="index"
              span="6"
              class="content"
              @click="toItemPage(item)"
          >
            <image :src="item.imageUrl" class="logs-image" />
            <span>{{ item.titleName }}</span>
          </view>
        </view>
        <view v-show="true" class="messageWrap clear">
          <view span="6" class="topNewsIcon" style="float:left;width: 25%;">
            <image src="../../assets/images/index/news@2x.png" />
          </view>
          <view span="18" class="topNewsList" style="float:left;width: 75%;">
            <view v-if="newsList && newsList.length > 0" class="topNewsOuter" :style="{'top' : -1.75 * newsCount + 'rem'}">
              <view
                  v-for="item in newsList"
                  :key="item.id"
                  class="topNewsItem"
                  :to="{name: 'DetailMessage',params:{id:item.detailId}}"
              >
                <span class="overflow-dot">{{ item.messageTitle }}</span>
                <i name="arrow" class="notice-arrow"></i>
              </view>
            </view>
            <view v-else class="topNewsOuter" :style="{'top' : '0rem'}">
              <view
                  class="topNewsItem"
                  :to="{path: '#'}"
              >
                <span class="overflow-dot">暂无消息</span>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="tabWrap">
        <view class="tabTitle">
          <span class="titleBlue"/>
          <span class="titleText">供需大厅</span>
          <view
              class="title-link"
              to="/supply"
          >更多</view>
        </view>
        <view class="tabContent">
          <view class="van-tabs__content">
            <view v-for="item in companyList" :key="item.id" class="companyItem" @click="toComDetail(item.id)">
              <view class="topImageWrap">
                <image :src="item.icon" />
              </view>
              <h3>{{ item.title }}</h3>
              <p class="date">{{ item.date }}</p>
            </view>
          </view>
        </view>
      </view>
      <view v-if="userInfo.organizationDetailVO.contactTel && userInfo.organizationDetailVO.contactTel !== ''" class="contactBox">
        <image :src="orgPic" />
        <view class="text">
          <h3>联系我们</h3>
          <p>
            园区电话：
            <span>{{ userInfo.organizationDetailVO.contactTel }}</span>
          </p>
        </view>
      </view>
    </view>
<!--    <AppFooter-->
<!--        :active="0"-->
<!--    />-->
<!--    <Popup-->
<!--        v-model="popFlag"-->
<!--    >-->
<!--      <view class="info-box">-->
<!--        <view class="info-icon">-->
<!--          <image src="../../assets/images/allserver/icon0.png" />-->
<!--        </view>-->
<!--        <view class="info-text">该功能暂未上线,敬请期待</view>-->
<!--        <view class="info-button" @click="popFlag = false">知道了</view>-->
<!--      </view>-->
<!--    </Popup>-->
  </view>
</template>

<script>
import menuList from '../../api/menuConfig'
// import AppFooter from './component/footer'
// import * as api from '../../api/park/homePage'
// import {mapState} from 'vuex'
export default {
  name: 'HomePage',
  // components: {AppFooter, Popup},
  data() {
    return {
      userType: '',
      address: '',
      itemList: [],
      weather: {},
      companyList: [],
      newsCount: 0,
      newsTimer: null,
      newsList: [],
      orgPic: '',
      popFlag: false
    }
  },
  computed: {
    // ...mapState({
    //   userInfo: state => state.user.userDetail,
    //   miniProgramParkId: state => state.user.parkId
    // })
  },
  created() {
    this.userInfo = {}
    this.getUserType()
    this.initData()
  },
  destroyed() {
    clearInterval(this.newsTimer)
  },
  methods: {
    startNewsTimer() {
      clearInterval(this.newsTimer)
      this.newsTimer = setInterval(() => {
        this.newsCount = this.newsCount > (this.newsList.length - 2) ? 0 : (this.newsCount + 1)
      }, 5000)
    },
    getUserType() {
      // 后端枚举: 00游客 01园区员工 02企业员工
      // 页面用户类型 0游客 1园区 2企业
      switch (this.userInfo.roleTypeVO.roleCode) {
        case '00': {
          this.userType = '0'
          break
        }
        case '01': {
          this.userType = '1'
          break
        }
        case '02': {
          this.userType = '2'
          break
        }
      }
      uni.setStorageSync('userType', this.userType)
      // this.userType = this.userInfo.userType
      this.getMenu()
      this.orgPic = this.userInfo.organizationDetailVO.picId ? ('/jkbppark/ufile/showPic/' + this.userInfo.organizationDetailVO.picId) : require('../../static/images/index/contact@2x.png')
    },
    getMenu() {
      let menu = []
      this.itemList = []
      switch (this.userType) {
        case '0': {
          menu = ['招商信息', '供需大厅', '来客登记', '预约到访', '停车缴费', '智慧食堂', '人才招聘', '财富管理']
          break
        }
        case '1': {
          menu = ['通知公告', '投诉管理', '报修管理', '巡检打卡', '来客登记', '停车缴费', '智慧食堂', '财富管理']
          break
        }
        case '2': {
          menu = ['物业缴费', '停车缴费', '班车管理', '通知公告', '来客登记', '考勤打卡', '会议室预定', '财富管理']
          break
        }
      }
      menu && menu.forEach(val => {
        const arr = menuList.filter(item => item.titleName === val)
        arr && (arr.length > 0) && this.itemList.push(arr[0])
      })
    },
    initData() {
      // 获取供需信息,需要parkId
      const orgId = this.userType === '0' ? this.miniProgramParkId : null
      /*
      api.getCompanyList({
        supdemType: '3',
        size: 3,
        current: 1,
        parkId: orgId
      }).then(data => {
        if (data.respCode === 'FJKBP0000') {
          const temp = []
          data.data && data.data.forEach(val => {
            temp.push({
              id: val.supdemId,
              // icon: require('@/assets/images/index/contact@2x.png'),
              icon: api.showImage(val.supdemImageId),
              tagText: val.supdemText,
              date: val.approvalTime,
              title: val.supdemTitle,
              description: val.ext1
            })
          })
          this.companyList = temp
          //  :src="'/pmh5api/jkbppark/ufile/showPic/' + item.supdemImageId"
        } else {
          Notify(data.data.respMsg)
        }
      })
      */
      // 获取通知
      const type = this.userType === '2' ? '1001' : '1002'
      /*
      api.getNotice({
        current: 1,
        noticeType: type, // "1001"企业公告 1002 园区公告
        releaseStatus: '1',
        size: 3,
        title: '',
        orgId: orgId
      }).then(data => {
        if (data.respCode === 'FJKBP0000') {
          const temp = []
          data.data && data.data.forEach(val => {
            temp.push({
              link: '/detailMessage',
              linkName: 'DetailMessage',
              detailId: val.id,
              messageTitle: val.title
            })
          })
          if (temp.length > 0) {
            this.newsList = temp
          } else {
            this.newsList = []
          }
          this.startNewsTimer()
        } else {
          Notify(data.data.respMsg)
        }
      })
      */
    },
    toComDetail(id) {
      console.log(id)
      // this.$router.push({
      //   name: 'SupplyDetail',
      //   params: {
      //     supdemId: id
      //   }
      // })
    },
    toItemPage(item) {
      if (!item.onlineStatus) {
        this.popFlag = true
        return false
      }
      if (item.url) {
        // this.$router.push(item.url)
      }
    },
    onClick(obj) {

    },
    onChange(obj) {

    }
  }
}
</script>

<style scoped lang="less">
.wapper {
  padding-bottom: 32rpx;
  .header {
    position: relative;
    width: 100%;
    height: 272rpx;
    .headerImg {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .bannerInner {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 55rpx 16rpx 15rpx 25rpx;
      box-sizing: border-box;
      z-index: 2;
      .bannerText {
        position: absolute;
        left: 25rpx;
        bottom: 103rpx;
        width: 168rpx;
        height: 29rpx;
      }
      .choiceAddress {
        display: inline-block;
        position: relative;
        padding-right: 15rpx;
        line-height: 20rpx;
        font-size: 18rpx;
        color: #fff;
        .addressArrow {
          position: absolute;
          top: 50%;
          right: 0;
          width: 7rpx;
          height: 5rpx;
          transform: translateY(-50%);
        }
      }
      .weather {
        margin-top: 12rpx;
        line-height: 20rpx;
        color: #fff;
        font-size: 12rpx;
        .weatherIcon {
          position: relative;
          top: -1rpx;
          width: 16rpx;
          height: 15rpx;
          margin-right: 1rpx;
          vertical-align: middle;
        }
        .windIfo {
          margin-left: 15rpx;
        }
      }
      .bannerSubtitle {
        position: absolute;
        left: 25rpx;
        top: 177rpx;
        padding-left: 8rpx;
        line-height: 20rpx;
        font-size: 12rpx;
        color: #fff;
        box-sizing: border-box;
        letter-spacing: 3rpx;
        &:before {
          position: absolute;
          left: 0;
          top: 50%;
          content: "";
          width: 2rpx;
          height: 12rpx;
          background-color: #fff;
          transform: translateY(-50%);
        }
      }
    }
  }
  .indexContent {
    position: relative;
    padding: 0 12rpx;
    box-sizing: border-box;
    z-index: 3;
    padding-bottom: 30rpx;
    .contentWrap {
      position: relative;
      margin-top: -20rpx;
      width: 100%;
      padding: 10rpx 24rpx 0 24rpx;
      background-color: #fff;
      border-radius: 8rpx;
      box-sizing: border-box;
      box-shadow: 0 6rpx 20rpx 0 rgba(0, 94, 166, 5%);
      .bannerImg {
        position: absolute;
        top: -144rpx;
        right: 0;
        width: 179rpx;
        height: 150rpx;
      }
      .commonItemWrap {
        padding-bottom: 6rpx;
        .content {
          float: left;
          width: 25%;
          text-align: center;
          padding: 7rpx 0;
          .logs-img {
            width: 48rpx;
            height: 48rpx;
            /* margin-bottom: 10rpx; */
            vertical-align: top;
          }
          span {
            display: block;
            line-height: 17rpx;
            font-size: 12rpx;
            color: #212329;
          }
        }
      }
      .messageWrap {
        padding: 15rpx 0;
        border-top: 1rpx solid #eaeff7;
        .topNewsIcon {
          height: 16rpx;
          padding-right: 10rpx;
          border-right: 1rpx solid #eaeff7;
          img {
            width: 100%;
            height: 16rpx;
          }
        }
        .topNewsList {
          overflow: hidden;
          position: relative;
          height: 20rpx;
          .topNewsOuter {
            position: absolute;
            width: 100%;
            left: 0;
            transition: all 0.5s;
            .topNewsItem {
              display: block;
              position: relative;
              padding: 0 10rpx 0 10rpx;
              margin-bottom: 8rpx;
              line-height: 20rpx;
              font-size: 14rpx;
              color: #848892;
              span{
                display: block;
                width: 100%;
              }
              .newsStatus {
                position: absolute;
                top: 0;
                left: 10rpx;
                padding: 0 6rpx;
                color: #acb3b9;
                background-color: #e7ebef;
                font-size: 12rpx;
                border-radius: 4rpx;
              }
              .van-icon-arrow {
                position: absolute;
                top: 4rpx;
                right: 0;
              }
            }
          }
        }
      }
    }
    .tabWrap {
      position: relative;
      margin: 12rpx 0;
      padding: 20rpx;
      background-color: #fff;
      border-radius: 12rpx;
      .tabTitle {
        position: relative;
        align-items: center;
        width: 100%;
        height: 25rpx;
        padding-left: 14rpx;
        box-sizing: border-box;
        .titleBlue {
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 4rpx;
          height: 18rpx;
          background-color: #3a7efc;
        }
        .titleText {
          font-size: 18rpx;
          font-weight: bold;
          line-height: 25rpx;
        }
        .title-link{
          position: absolute;
          right: 0;
          top: 0;
          font-size: 14rpx;
          line-height: 25rpx;
          color:#a3a5ac;
        }
      }
      .tabContent {
        .van-tabs__content {
          height: calc(100% - 44rpx);
          .companyItem {
            margin-top: 20rpx;
            font-size: 14rpx;
            .topImageWrap {
              position: relative;
              width: 100%;
              height: 110rpx;
              border-radius: 10rpx;
              color: #fff;
              overflow: hidden;
              margin-bottom: 10rpx;
              img {
                width: 100%;
                height: 100%;
              }
            }
            h3 {
              line-height: 20rpx;
              color: #212329;
              font-weight: bold;
            }
            .date {
              line-height: 22rpx;
              color:#a7acb9;
              font-size: 12rpx;
            }
          }
          .van-tab__pane {
            height: 100%;
          }
        }
        .content {
          height: 100%;
        }
      }
      .more {
        display: block;
        width: 230rpx;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        margin: 0 auto;
        margin-top: 30rpx;
        background-color: #f4f5f5;
        color: #a3a5ac;
        font-size: 14rpx;
        border-radius: 6rpx;
      }
    }
    .recommendBox {
      width: 100%;
      margin-top: 13rpx;
      .recLeft {
        .recName {
          background-color: #3a7efc;
        }
      }
      .recRight {
        .recName {
          background-color: #fca23a;
        }
      }
      .recName {
        position: relative;
        width: 100%;
        padding: 16rpx 0 16rpx 70rpx;
        border-radius: 10rpx 10rpx 0 0;
        div {
          padding-top: 6rpx;
          line-height: 22rpx;
          font-size: 16rpx;
          color: #fff;
        }
        span {
          margin-top: 4rpx;
          font-size: 12rpx;
          color: #fff;
          opacity: 0.6;
        }
        img {
          position: absolute;
          top: 60%;
          left: 6rpx;
          width: 60rpx;
          height: 60rpx;
          transform: translateY(-50%);
        }
      }
      .recItems {
        padding: 15rpx;
        background-color: #fff;
        border-radius: 0 0 10rpx 10rpx;
        .recItem {
          position: relative;
          padding-left: 58rpx;
          margin-bottom: 18rpx;
          &:nth-last-child(1) {
            margin-bottom: 0;
          }
        }
        img {
          position: absolute;
          top: 50%;
          left: 0;
          width: 42rpx;
          height: 42rpx;
          transform: translateY(-50%);
        }
        h3 {
          line-height: 24rpx;
          font-weight: bold;
          font-size: 14rpx;
          color: #212329;
        }
        span {
          color: #a3a5ac;
          font-size: 12rpx;
          line-height: 17rpx;
        }
      }
    }
    .contactBox {
      position: relative;
      height: 80rpx;
      margin-top: 13rpx;
      margin-bottom: 30rpx;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
      }
      .text {
        padding: 18rpx 0 0 22rpx;
        h3 {
          line-height: 22rpx;
          font-size: 16rpx;
          font-weight: bold;
          color: #212329;
        }
        p {
          margin-top: 4rpx;
          color: #a3a5ac;
          font-size: 12rpx;
          span {
            color: #212329;
          }
        }
      }
    }
    .noMe {
      padding: 16rpx 0;
      text-align: center;
      color: #999;
      font-size: 12rpx;
    }
  }
}
.info-box{
  width: 280rpx;
  height: 200rpx;
  box-sizing: border-box;
  position: relative;
  padding-top: 30rpx;
  .info-icon{
    width: 100%;
    text-align: center;
    img{
      width: 87rpx;
    }
  }
  .info-text{
    text-align: center;
    color:#333;
    line-height: 22rpx;
    font-size: 16rpx;
  }
  .info-button{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    border-top: 1rpx solid #e8eef6;
    box-sizing: border-box;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    color:#ed3944;
    font-size: 18rpx;
  }
}
.notice-arrow{
  font-size: 16rpx;
}
::v-deep{
  .van-popup{
    border-radius: 10rpx;
    overflow: hidden;
  }
}
.overflow-dot{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>